<template>
	<view class="container">
		<view class="fuwu">服务评分</view>
		<view class="fuwu_main clearfix">
			<image src="https://img0.baidu.com/it/u=2547121781,4013571805&fm=253&fmt=auto&app=138&f=JPEG?w=1000&h=500"
				class="picture"></image>
			<view class="fuwu_right">
				<text>小王骑车美容店</text>
				<!-- 打分 -->
				<uni-rate :max="5" :value="3.5" class="dafen" />
			</view>
		</view>

		<view>
			<text class="pingyu"> 评语 （0-200字）</text>
			<!-- 输入框 -->
			<!-- <uni-easyinput type="textarea" v-model="baseFormData.appraise" placeholder="请输入自我介绍" /> -->
			<uni-forms ref="valiForm" :modelValue="baseFormData" class="pingyu_main">
				<uni-forms-item name="appraise">
					<uni-easyinput type="textarea" v-model="baseFormData.appraise" placeholder="请输入评语" />
				</uni-forms-item>
				<uni-forms-item name="picture">
					<!-- <text>照片（选填）</text> -->
					<view class="example-body">
						<uni-file-picker file-mediatype="image" limit="9" title="评价图片(最多9张)" autoUpload="false " v-model="imageValue" @select="select" @progress="progress" @success="success"
							@fail="fail"></uni-file-picker>
					</view>
				</uni-forms-item>
			</uni-forms>
			<button type="primary" @click="submit('valiForm')">提交</button>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseFormData: {
					appraise: ''
				},
				imageValue:[]
			}
		},
		methods: {

			// 获取文件上传状态
			select(e) {
				console.log('选择文件：', e)
			},
			// 获取上传进度
			progress(e) {
				console.log('上传进度：', e)
			},

			// 上传成功
			success(e) {
				console.log('上传成功')
			},

			// 上传失败
			fail(e) {
				console.log('上传失败：', e)
			},

			submit(ref) {
				this.$refs[ref].validate((err, value) => {
					console.log(err, value);
				})
			},

		}
	}
</script>

<style scoped>
	.container {
		background-color: #fff;
		padding-top: 10px;

	}

	.fuwu {
		font-size: 16px;
		margin-left: 15px;

	}

	.fuwu_main {
		margin-top: 10px;
		padding-left: 15px;
		/* margin-bottom: 20px; */
		border-bottom: 2px solid #d8d8d8;
		/* background-color: aquamarine; */
	}

	.picture {
		float: left;
		width: 120px;
		height: 100px;
		margin-right: 20px;
	}

	.fuwu_right {
		float: left;
		font-size: 18px;
		font-weight: 600;
	}


	.picture {
		width: 120px;
		height: 100px;
	}

	.dafen {
		margin-top: 20px;
	}

	/* 评语 */
	.pingyu {
		display: block;
		font-size: 16px;
		margin-left: 15px;
		margin-top: 10px;

	}
	
	.pingyu_main{
		margin: 10px auto;
		width: 350px;
	}

	.example-body {
		padding: 10px;
		padding-top: 0;
	}

	.clearfix:after,
	.clearfix:before {
		content: "";
		display: table;
	}

	.clearfix:after {
		clear: both;
	}

	.clearfix {
		/* *zoom: 1; */
	}
</style>